<template>
  <div class="categories-container">
    <div class="page-header">
      <h1>分类管理</h1>
      <button class="add-button" @click="showAddDialog = true">
        <i class="fa fa-plus"></i>
        添加分类
      </button>
    </div>
    
    <!-- 搜索框 -->
    <div class="search-box">
      <i class="fa fa-search"></i>
      <input 
        v-model="searchQuery" 
        type="text" 
        placeholder="搜索分类名称"
        @input="handleSearch"
      />
    </div>
    
    <!-- 分类列表 -->
    <div class="categories-list">
      <div v-for="category in paginatedCategories" :key="category.id" class="category-card">
        <div class="category-info">
          <div class="category-icon" :class="category.icon">
            <i :class="`fa ${getIconClass(category.icon)}`"></i>
          </div>
          <div class="category-details">
            <h3 class="category-name">{{ category.name }}</h3>
            <p class="category-description">{{ category.description || '暂无描述' }}</p>
            <div class="category-meta">
              <span class="category-videos">{{ category.videoCount }} 个视频</span>
              <span class="category-status" :class="category.status">
                {{ category.status === 'active' ? '启用' : '禁用' }}
              </span>
            </div>
          </div>
        </div>
        <div class="category-actions">
          <button class="action-btn edit-btn" @click="editCategory(category)">
            <i class="fa fa-edit"></i>
            编辑
          </button>
          <button class="action-btn status-btn" @click="toggleCategoryStatus(category)">
            {{ category.status === 'active' ? '禁用' : '启用' }}
          </button>
          <button class="action-btn delete-btn" :disabled="category.videoCount > 0" @click="deleteCategory(category)">
            <i class="fa fa-trash"></i>
            删除
          </button>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-if="filteredCategories.length === 0" class="empty-state">
        <i class="fa fa-folder"></i>
        <p>暂无分类数据</p>
      </div>
    </div>
    
    <!-- 分页 -->
    <div v-if="filteredCategories.length > 0" class="pagination">
      <button :disabled="currentPage === 1" @click="currentPage = 1">
        <i class="fa fa-angle-double-left"></i>
      </button>
      <button :disabled="currentPage === 1" @click="currentPage--">
        <i class="fa fa-angle-left"></i>
      </button>
      <span class="page-info">
        第 {{ currentPage }} 页，共 {{ totalPages }} 页
      </span>
      <button :disabled="currentPage === totalPages" @click="currentPage++">
        <i class="fa fa-angle-right"></i>
      </button>
      <button :disabled="currentPage === totalPages" @click="currentPage = totalPages">
        <i class="fa fa-angle-double-right"></i>
      </button>
    </div>
    
    <!-- 添加/编辑分类对话框 -->
    <div v-if="showAddDialog || showEditDialog" class="dialog-overlay" @click="closeDialog">
      <div class="dialog" @click.stop>
        <div class="dialog-header">
          <h3>{{ showEditDialog ? '编辑分类' : '添加分类' }}</h3>
          <button class="close-button" @click="closeDialog">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="dialog-content">
          <form @submit.prevent="submitCategoryForm">
            <div class="form-group">
              <label>分类名称</label>
              <input v-model="categoryForm.name" type="text" required />
            </div>
            <div class="form-group">
              <label>分类描述</label>
              <textarea v-model="categoryForm.description" rows="3"></textarea>
            </div>
            <div class="form-group">
              <label>分类图标</label>
              <div class="icon-selector">
                <button 
                  v-for="icon in availableIcons" 
                  :key="icon" 
                  type="button"
                  :class="['icon-option', { active: categoryForm.icon === icon }]"
                  @click="categoryForm.icon = icon"
                >
                  <i :class="`fa ${getIconClass(icon)}`"></i>
                </button>
              </div>
            </div>
            <div class="form-group">
              <label>分类状态</label>
              <select v-model="categoryForm.status" required>
                <option value="active">启用</option>
                <option value="inactive">禁用</option>
              </select>
            </div>
            <div class="dialog-footer">
              <button type="button" class="cancel-button" @click="closeDialog">取消</button>
              <button type="submit" class="save-button">{{ showEditDialog ? '更新' : '添加' }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CategoriesView',
  data() {
    return {
      // 可用图标列表
      availableIcons: ['film', 'music', 'gamepad', 'tv', 'book', 'code', 'coffee', 'heart', 'car', 'plane'],
      // 模拟分类数据
      categories: [
        {
          id: 'anime',
          name: '动画',
          description: '包含动画、番剧、动漫周边等内容',
          icon: 'film',
          status: 'active',
          videoCount: 156,
        },
        {
          id: 'music',
          name: '音乐',
          description: '音乐、演唱会、乐器演奏等音乐相关内容',
          icon: 'music',
          status: 'active',
          videoCount: 234,
        },
        {
          id: 'game',
          name: '游戏',
          description: '游戏实况、游戏攻略、游戏评测等',
          icon: 'gamepad',
          status: 'active',
          videoCount: 345,
        },
        {
          id: 'entertainment',
          name: '娱乐',
          description: '搞笑、明星、综艺等娱乐内容',
          icon: 'tv',
          status: 'active',
          videoCount: 189,
        },
        {
          id: 'knowledge',
          name: '知识',
          description: '科普、教育、技能学习等知识类内容',
          icon: 'book',
          status: 'active',
          videoCount: 123,
        },
        {
          id: 'tech',
          name: '科技',
          description: '数码产品、科技新闻、技术分享等',
          icon: 'code',
          status: 'active',
          videoCount: 98,
        },
        {
          id: 'life',
          name: '生活',
          description: '美食、旅游、生活技巧等生活类内容',
          icon: 'coffee',
          status: 'active',
          videoCount: 211,
        },
        {
          id: 'emotion',
          name: '情感',
          description: '情感故事、恋爱、心理等内容',
          icon: 'heart',
          status: 'inactive',
          videoCount: 0,
        },
        {
          id: 'auto',
          name: '汽车',
          description: '汽车评测、保养、改装等内容',
          icon: 'car',
          status: 'active',
          videoCount: 56,
        },
        {
          id: 'travel',
          name: '旅游',
          description: '旅游攻略、景点介绍、旅行分享等',
          icon: 'plane',
          status: 'active',
          videoCount: 78,
        },
      ],
      searchQuery: '',
      currentPage: 1,
      itemsPerPage: 6,
      showAddDialog: false,
      showEditDialog: false,
      categoryForm: {
        id: '',
        name: '',
        description: '',
        icon: 'film',
        status: 'active',
        videoCount: 0,
      },
    }
  },
  computed: {
    filteredCategories() {
      let filtered = this.categories
      
      // 搜索
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        filtered = filtered.filter(category => 
          category.name.toLowerCase().includes(query) || 
          category.description.toLowerCase().includes(query),
        )
      }
      
      return filtered
    },
    paginatedCategories() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.filteredCategories.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.filteredCategories.length / this.itemsPerPage)
    },
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    getIconClass(iconName) {
      const iconMap = {
        'film': 'fa-film',
        'music': 'fa-music',
        'gamepad': 'fa-gamepad',
        'tv': 'fa-television',
        'book': 'fa-book',
        'code': 'fa-code',
        'coffee': 'fa-coffee',
        'heart': 'fa-heart',
        'car': 'fa-car',
        'plane': 'fa-plane',
      }
      return iconMap[iconName] || 'fa-folder'
    },
    editCategory(category) {
      this.categoryForm = { ...category }
      this.showEditDialog = true
    },
    toggleCategoryStatus(category) {
      const newStatus = category.status === 'active' ? 'inactive' : 'active'
      if (confirm(`确定要${newStatus === 'active' ? '启用' : '禁用'}分类 "${category.name}" 吗？`)) {
        // 在实际应用中，这里应该调用API
        category.status = newStatus
      }
    },
    deleteCategory(category) {
      if (category.videoCount > 0) {
        alert('该分类下还有视频，无法删除！')
        return
      }
      
      if (confirm(`确定要删除分类 "${category.name}" 吗？此操作不可撤销！`)) {
        // 在实际应用中，这里应该调用API
        const index = this.categories.findIndex(c => c.id === category.id)
        if (index > -1) {
          this.categories.splice(index, 1)
        }
      }
    },
    closeDialog() {
      this.showAddDialog = false
      this.showEditDialog = false
      this.resetForm()
    },
    resetForm() {
      this.categoryForm = {
        id: '',
        name: '',
        description: '',
        icon: 'film',
        status: 'active',
        videoCount: 0,
      }
    },
    generateId(name) {
      return name.toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '')
    },
    submitCategoryForm() {
      if (this.showEditDialog) {
        // 编辑分类
        const index = this.categories.findIndex(c => c.id === this.categoryForm.id)
        if (index > -1) {
          this.categories[index] = { ...this.categories[index], ...this.categoryForm }
        }
      } else {
        // 添加分类
        const newCategory = {
          ...this.categoryForm,
          id: this.generateId(this.categoryForm.name),
          videoCount: 0,
        }
        this.categories.push(newCategory)
      }
      
      this.closeDialog()
    },
  },
}
</script>

<style scoped>
.categories-container {
  max-width: 1000px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  color: #2c3e50;
  margin: 0;
  font-size: 24px;
}

.add-button {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition: background-color 0.3s;
}

.add-button:hover {
  background: #2980b9;
}

.add-button i {
  margin-right: 5px;
}

/* 搜索框 */
.search-box {
  position: relative;
  margin-bottom: 20px;
}

.search-box i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #95a5a6;
}

.search-box input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

/* 分类列表 */
.categories-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.category-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.category-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.category-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  flex-shrink: 0;
}

.category-icon.film {
  background: #e74c3c;
}

.category-icon.music {
  background: #9b59b6;
}

.category-icon.gamepad {
  background: #1abc9c;
}

.category-icon.tv {
  background: #f39c12;
}

.category-icon.book {
  background: #34495e;
}

.category-icon.code {
  background: #7f8c8d;
}

.category-icon.coffee {
  background: #e67e22;
}

.category-icon.heart {
  background: #c0392b;
}

.category-icon.car {
  background: #27ae60;
}

.category-icon.plane {
  background: #16a085;
}

.category-details {
  flex: 1;
}

.category-name {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.category-description {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.5;
}

.category-meta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.category-videos {
  font-size: 14px;
  color: #3498db;
  font-weight: 500;
}

.category-status {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.category-status.active {
  background: #2ecc71;
  color: white;
}

.category-status.inactive {
  background: #95a5a6;
  color: white;
}

.category-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.edit-btn {
  background: #3498db;
  color: white;
}

.edit-btn:hover {
  background: #2980b9;
}

.status-btn {
  background: #f39c12;
  color: white;
}

.status-btn:hover {
  background: #e67e22;
}

.delete-btn {
  background: #e74c3c;
  color: white;
}

.delete-btn:hover:not(:disabled) {
  background: #c0392b;
}

.delete-btn:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
  opacity: 0.6;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #95a5a6;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.pagination button {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.pagination button:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #3498db;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
  color: #666;
}

/* 对话框 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.dialog-header h3 {
  margin: 0;
  color: #2c3e50;
}

.close-button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #95a5a6;
}

.dialog-content {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #34495e;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

/* 图标选择器 */
.icon-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.icon-option {
  width: 50px;
  height: 50px;
  border: 2px solid #ddd;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #7f8c8d;
  transition: all 0.3s;
}

.icon-option:hover {
  border-color: #3498db;
  color: #3498db;
}

.icon-option.active {
  border-color: #3498db;
  background: #ebf5fb;
  color: #3498db;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

.cancel-button,
.save-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.cancel-button {
  background: #ecf0f1;
  color: #7f8c8d;
}

.cancel-button:hover {
  background: #bdc3c7;
}

.save-button {
  background: #3498db;
  color: white;
}

.save-button:hover {
  background: #2980b9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .category-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .category-info {
    width: 100%;
  }
  
  .category-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .icon-selector {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .pagination {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .action-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}
</style>